<template>
	<view class="container">
		<view class="loginbg flex algin-i-c">
			<image :src="logoInfo" v-if="logoInfo"></image>
			<image src="@/common/images/logo.png" v-else></image>
			<view>自动化监测工程项目管理系统</view>
		</view>
		<view class="loginForm">
			<form :v-model="loginForm">
				<view class="loginForm-list flex algin-i-c">
					<i class='iconfont'></i>
					<input type="text" v-model="loginForm.username" placeholder="请输入用户名称" />
				</view>
				<view class="loginForm-list flex algin-i-c">
					<i class='iconfont'></i>
					<input type="password" v-model="loginForm.password" placeholder="请输入登录密码" />
				</view>
				<button form-type="submit" @click="goHome()">登录</button>
			</form>
		</view>
		<view class="login-footer">
			<!-- <text>技术支持：</text> -->
		</view>
	</view>
</template>

<script>
	import ipConfig from '@/utils/ipconfig.js'
	import { login, getLogoInfo, getLogoById } from '@/common/api/api.js'
	import {remindWarningNumber} from '@/common/api/profile.js'
	export default {
		data() {
			return {
				logoInfo: '',
				loginForm:{
					grant_type: 'password',
					username:'',
					password:'',
				}
			}
		},
		onShow() {
			uni.clearStorage();
		},
		onLoad() {
			getLogoInfo({position: 1, type: 2}).then(res=> {
				if(res.code == 20000){
					getLogoById({id: res.data.fileId}).then((res)=> {
						this.logoInfo = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res);
					})
				}
			})
		},
		methods: {
			goHome(){
				login(this.loginForm).then(res => {
					if(res.code == '20001'){
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration:3000
						})
					}else{
						this.socket(res.user_info, res.access_token);
						uni.setStorageSync('token',res.access_token);
						uni.setStorageSync('user_info',res.user_info);
						uni.switchTab({
							url: '/pages/Application/Application'
						})
					}
				})
			},
			socket(user, token) {
				try{
					 //连接
					uni.connectSocket({
					   url: `${ipConfig.socket}admin/websocket/${user.id}?access_token=${token}`,
					});
					uni.onSocketOpen(function (res) {
					  console.log('WebSocket连接已打开！');
					});
					uni.onSocketMessage(function (res) {
					  console.log('收到服务器内容：', res.data);
						let data = JSON.parse(res.data);
						uni.showModal({
							title:'提示',
							content:`您有新的任务，请立即前往查看并处理!`,
							confirmText:'立即处理',
							success: (res) => {
								if(res.confirm){
									if(data.processId){
										let ConstructionProjectStorage = {
											processId:data.processId,
											subProjectId:data.subProjectId,
											projectId:data.projectId,
											projectName:data.projectName
										}
										uni.setStorageSync('ConstructionProjectStorage',ConstructionProjectStorage)
										uni.navigateTo({
											url:'/pages/Application/ConstructionReport/ConstructionProject/ProjectReport/ProjectReport'
										})
									}else if(data.assessmentId){
										uni.navigateTo({
										  url: `/pages/Application/ConstructionAudit/ConstructionProject/ProjectAudit/ProjectAudit?projectId=${data.projectId}&subProjectId=${data.subProjectId}&assessmentId=${data.assessmentId}`
										});
									}else{
										uni.navigateTo({
											url:'/pages/Personal/RemindWarning/RemindWarning'
										})
									}
								}
							}
						})
					});
				}catch(e){
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="less">
	.container {
		position: relative;
		background-color: #fff;
	}
	.loginbg{
		height: 600rpx;
		background: url('@/common/images/login.png') no-repeat center;
		background-size: cover;
		justify-content: center;
		flex-direction: column;
		>view {
			display: block;
			width: 100%;
			text-align: center;
			color: #fff;
			font-size: 40rpx;
		}
		>image{
			height: 150rpx;
		}
	}
	.loginForm {
		width: 70%;
		margin: 0 auto;
		padding: 100rpx 10%;
		position: absolute;
		top: 55%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff url('@/common/images/login2.png') no-repeat right bottom;
		background-size:400rpx 280rpx;
		box-shadow: 0rpx 0rpx 48rpx 0rpx rgba(5, 5, 5, 0.1);
		border-radius: 20rpx;
	}


	.loginForm-list {
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		margin-bottom: 30rpx;
		padding: 0 20rpx;
		border: 2rpx solid #ddd;
	}

	.loginForm-list i {
		font-size: 40rpx;
		color: #fff;
		margin-right: 10rpx;
	}

	.loginForm-list uni-input {
		height: 100%;
		color: #999;
	}

	.uni-input-placeholder {
		color: #999;
	}

	uni-button {
		border-radius: 50rpx;
		color: #fff;
		background-color: #09AAE9;
		height: 90rpx;
		line-height: 90rpx;
	}
	.login-footer{position: fixed;left: 0;bottom: 4%;width: 100%;text-align: center;color: #999;}
</style>
